<template>
  <div class="bg-white px-3 py-2.5 sm:px-5 sm:py-3">
    <div class="flex items-center flex-wrap gap-2 sm:gap-4">
      <div class="flex items-center gap-1.5 sm:gap-2">
        <!-- 启动/停止按钮 -->
        <el-button
          type="success"
          icon="el-icon-video-play"
          size="small"
          :disabled="debuggerState !== 'stopped'"
          @click="$emit('start')"
          class="btn-responsive"
        >
          <span class="hidden sm:inline">启动调试</span>
          <span class="sm:hidden">启动</span>
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-video-pause"
          size="small"
          :disabled="debuggerState === 'stopped' || debuggerState === 'stopping'"
          @click="$emit('stop')"
          class="btn-responsive"
        >
          <span class="hidden sm:inline">停止调试</span>
          <span class="sm:hidden">停止</span>
        </el-button>
      </div>

      <el-divider direction="vertical" class="!h-6 !m-0 !bg-gray-300 hidden sm:block"></el-divider>

      <div class="flex items-center gap-1.5 sm:gap-2">
        <!-- 继续按钮 -->
        <el-button
          type="primary"
          icon="el-icon-caret-right"
          size="small"
          :disabled="debuggerState !== 'paused'"
          @click="$emit('continue')"
          title="继续执行到下一个断点 (F5)"
          class="btn-responsive"
        >
          <span class="hidden sm:inline">继续</span>
        </el-button>
      </div>

      <el-divider direction="vertical" class="!h-6 !m-0 !bg-gray-300 hidden sm:block"></el-divider>

      <div class="flex items-center gap-1.5 sm:gap-2">
        <!-- 单步执行按钮 -->
        <el-button
          icon="el-icon-bottom"
          size="small"
          :disabled="debuggerState !== 'paused'"
          @click="$emit('step-over')"
          title="单步跳过 (F10)"
          class="btn-responsive"
        >
          <span class="hidden lg:inline">步过</span>
        </el-button>
        <el-button
          icon="el-icon-top-right"
          size="small"
          :disabled="debuggerState !== 'paused'"
          @click="$emit('step-into')"
          title="单步进入 (F11)"
          class="btn-responsive"
        >
          <span class="hidden lg:inline">步入</span>
        </el-button>
        <el-button
          icon="el-icon-top"
          size="small"
          :disabled="debuggerState !== 'paused'"
          @click="$emit('step-out')"
          title="单步退出 (Shift+F11)"
          class="btn-responsive"
        >
          <span class="hidden lg:inline">步出</span>
        </el-button>
      </div>

      <el-divider direction="vertical" class="!h-6 !m-0 !bg-gray-300 hidden sm:block"></el-divider>

      <div class="flex items-center gap-2 ml-auto">
        <span class="text-gray-600 text-xs sm:text-sm hidden md:inline">状态：</span>
        <el-tag
          :type="stateType"
          size="small"
          effect="plain"
        >
          {{ stateText }}
        </el-tag>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DebugControlPanel',
  props: {
    debuggerState: {
      type: String,
      default: 'stopped'
    },
    isRunning: {
      type: Boolean,
      default: false
    },
    isPaused: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    stateText() {
      const states = {
        stopped: '已停止',
        running: '运行中',
        paused: '已暂停',
        stopping: '正在停止'
      }
      return states[this.debuggerState] || '未知'
    },
    stateType() {
      const types = {
        stopped: 'info',
        running: 'success',
        paused: 'warning',
        stopping: 'info'
      }
      return types[this.debuggerState] || 'info'
    }
  },
  mounted() {
    // 添加键盘快捷键
    document.addEventListener('keydown', this.handleKeydown)
  },
  beforeDestroy() {
    document.removeEventListener('keydown', this.handleKeydown)
  },
  methods: {
    handleKeydown(e) {
      // 只在 paused 状态下才响应快捷键
      if (this.debuggerState !== 'paused') {
        return
      }

      // F5 - 继续
      if (e.key === 'F5') {
        e.preventDefault()
        this.$emit('continue')
      }
      // F10 - 步过
      else if (e.key === 'F10') {
        e.preventDefault()
        this.$emit('step-over')
      }
      // F11 - 步入
      else if (e.key === 'F11' && !e.shiftKey) {
        e.preventDefault()
        this.$emit('step-into')
      }
      // Shift+F11 - 步出
      else if (e.key === 'F11' && e.shiftKey) {
        e.preventDefault()
        this.$emit('step-out')
      }
    }
  }
}
</script>

<style scoped>
/* 响应式按钮样式 */
.btn-responsive >>> .el-button__inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 小屏幕优化 */
@media (max-width: 640px) {
  .btn-responsive {
    padding: 7px 10px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 1024px) {
  .btn-responsive >>> i {
    margin-right: 0 !important;
  }
}
</style>
